import { useNavigate } from 'react-router-dom';
import { useState, useEffect, useRef } from 'react';
import './LiveCard.css';

export default function LiveCard({ live }) {
  const navigate = useNavigate();
  // 添加状态来跟踪鼠标悬停
  const [isHovered, setIsHovered] = useState(false);
  // 添加状态跟踪是否是移动设备
  const [isMobile, setIsMobile] = useState(false);
  // 添加状态跟踪是否被触摸激活
  const [isTouched, setIsTouched] = useState(false);
  // 添加状态跟踪是否正在滑动
  const [isSwiping, setIsSwiping] = useState(false);
  // 添加视频引用
  const videoRef = useRef(null);
  // 添加卡片引用，用于监测是否在可视区域内
  const cardRef = useRef(null);
  // 添加触摸事件坐标追踪
  const [touchStartX, setTouchStartX] = useState(0);
  const [touchStartY, setTouchStartY] = useState(0);
  // 添加加载状态
  const [isLoading, setIsLoading] = useState(false);
  // 添加是否在视窗中状态
  const [isInView, setIsInView] = useState(false);
  // 添加图片加载错误状态
  const [imgError, setImgError] = useState(false);
  // 添加图片加载状态
  const [imgLoaded, setImgLoaded] = useState(false);
  // 添加模拟热度数据
  const [hotLevel, setHotLevel] = useState(0);
  // 添加模拟推荐标签
  const [showTag, setShowTag] = useState(false);
  // 添加动效状态
  const [animActive, setAnimActive] = useState(false);
  // 添加直播时长
  const [duration, setDuration] = useState('00:00:00');
  
  // 添加视频URL（这里假设所有直播卡片都使用相同的预览视频）
  const videoUrl = '/meinv.mp4';
  
  // 检测设备类型
  useEffect(() => {
    // 检测是否是移动设备
    const checkMobile = () => {
      // 检查是否是触摸设备
      const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
      // 检查屏幕尺寸
      const isSmallScreen = window.innerWidth <= 768;
      
      setIsMobile(isTouchDevice || isSmallScreen);
    };
    
    // 初始检测
    checkMobile();
    
    // 窗口大小改变时重新检测
    window.addEventListener('resize', checkMobile);
    
    return () => {
      window.removeEventListener('resize', checkMobile);
    };
  }, []);
  
  // 检测元素是否在视图中
  useEffect(() => {
    // 创建 Intersection Observer 来检测元素是否在视图中
    const observer = new IntersectionObserver((entries) => {
      // entries 是被观察的元素列表
      entries.forEach(entry => {
        // 当元素进入或退出视图时会触发
        setIsInView(entry.isIntersecting);
        
        // 如果进入视图，触发动画效果
        if (entry.isIntersecting) {
          setAnimActive(true);
          setTimeout(() => setAnimActive(false), 1000);
        }
      });
    }, {
      // root: null 表示使用视窗作为参考
      root: null,
      // 设置阈值，当元素有70%在视图中时触发回调
      threshold: 0.7,
      // 可以设置根边距，扩大或缩小视窗的有效范围
      rootMargin: '0px'
    });
    
    // 开始观察卡片元素
    if (cardRef.current) {
      observer.observe(cardRef.current);
    }
    
    // 清理函数
    return () => {
      if (cardRef.current) {
        observer.unobserve(cardRef.current);
      }
    };
  }, []);
  
  // 生成随机热度和推荐标签
  useEffect(() => {
    // 随机热度等级 (0-5)
    setHotLevel(Math.floor(Math.random() * 5));
    
    // 随机决定是否显示推荐标签 (30%概率)
    setShowTag(Math.random() > 0.7);
    
    // 生成随机直播时长
    const hours = Math.floor(Math.random() * 5);
    const minutes = Math.floor(Math.random() * 60);
    const seconds = Math.floor(Math.random() * 60);
    setDuration(
      `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
    );
  }, []);
  
  // 处理视频加载和播放
  useEffect(() => {
    // 当鼠标悬停、触摸激活或卡片在视图中时，尝试播放视频
    if ((isHovered || isTouched || isInView) && videoRef.current) {
      // 设置加载状态
      setIsLoading(true);
      
      // 尝试播放视频
      const playPromise = videoRef.current.play();
      
      // 处理可能的播放错误
      if (playPromise !== undefined) {
        playPromise
          .then(() => {
            // 播放成功后关闭加载状态
            setIsLoading(false);
          })
          .catch(error => {
            console.error("视频播放失败:", error);
            setIsLoading(false);
          });
      }
    } else if (videoRef.current) {
      // 如果视频正在播放，暂停它
      if (!videoRef.current.paused) {
        videoRef.current.pause();
      }
      // 重置加载状态
      setIsLoading(false);
    }
  }, [isHovered, isTouched, isInView]);
  
  // 处理点击事件，导航到直播间
  const handleClick = (e) => {
    // 防止事件冒泡
    e.stopPropagation();
    
    // 如果是滑动操作，则不导航
    if (isSwiping) return;
    
    // 构建直播间ID，默认为101，如果提供了ID则使用提供的ID
    const liveRoomId = live.id || 101;
    
    // 导航到直播间页面
    navigate(`/live/${liveRoomId}`);
  };
  
  // 处理触摸开始事件
  const handleTouchStart = (e) => {
    // 记录触摸开始位置
    setTouchStartX(e.touches[0].clientX);
    setTouchStartY(e.touches[0].clientY);
  };
  
  // 处理触摸移动事件 - 用于滑动检测
  const handleTouchMove = (e) => {
    // 获取当前触摸位置
    const touchX = e.touches[0].clientX;
    const touchY = e.touches[0].clientY;
    
    // 计算移动距离
    const deltaX = Math.abs(touchX - touchStartX);
    const deltaY = Math.abs(touchY - touchStartY);
    
    // 显示滑动反馈
    if (deltaX > 5 || deltaY > 5) {
      setIsSwiping(true);
    }
  };
  
  // 处理触摸结束事件
  const handleTouchEnd = () => {
    // 重置滑动状态
    setIsSwiping(false);
  };
  
  // 处理触摸取消事件
  const handleTouchCancel = () => {
    // 重置触摸状态
    setTouchStartX(0);
    setTouchStartY(0);
    setIsSwiping(false);
  };
  
  // 处理视频加载事件
  const handleVideoLoad = () => {
    setIsLoading(false);
  };
  
  // 处理图片加载错误
  const handleImageError = () => {
    setImgError(true);
    // 设置默认图片
    console.error("封面图片加载失败:", live.cover);
  };
  
  // 处理图片加载完成
  const handleImageLoad = () => {
    setImgLoaded(true);
  };
  
  // 获取实际显示的封面图片
  const getCoverImage = () => {
    if (imgError) {
      // 如果原始图片加载失败，使用默认图片
      return '/vite.svg'; // 使用项目中的默认图片
    }
    return live.cover;
  };
  
  // 根据热度等级获取热度图标
  const getHotIcon = () => {
    if (hotLevel >= 4) return '🔥🔥🔥';
    if (hotLevel >= 2) return '🔥🔥';
    if (hotLevel >= 1) return '🔥';
    return '';
  };
  
  // 获取推荐标签文本
  const getTagText = () => {
    const tags = ['推荐', '热门', '新人', 'PK中', '才艺'];
    return tags[Math.floor(Math.random() * tags.length)];
  };
  
  return (
    <div 
      ref={cardRef}
      className={`live-card ${isTouched ? 'touched' : ''} ${isSwiping ? 'swiping' : ''} 
                 ${isInView ? 'in-view' : ''} ${animActive ? 'anim-active' : ''} 
                 ${hotLevel >= 3 ? 'hot-card' : ''}`} 
      onClick={handleClick}
      onMouseEnter={() => !isMobile && setIsHovered(true)}
      onMouseLeave={() => !isMobile && setIsHovered(false)}
      onTouchStart={isMobile ? handleTouchStart : undefined}
      onTouchMove={isMobile ? handleTouchMove : undefined}
      onTouchEnd={isMobile ? handleTouchEnd : undefined}
      onTouchCancel={isMobile ? handleTouchCancel : undefined}
    >
      {/* 视频/图片容器 */}
      <div className="media-container">
        {(isHovered || isTouched || isInView) ? (
          // 鼠标悬停、触摸或在视图中时显示视频
          <video 
            ref={videoRef}
            src={videoUrl}
            className="live-cover"
            muted
            loop
            playsInline
            onLoadedData={handleVideoLoad}
          />
        ) : (
          // 默认显示图片
          <img 
            src={getCoverImage()}
            alt={`${live.title} 直播间封面`}
            className="live-cover"
            onError={handleImageError}
            onLoad={handleImageLoad}
          />
        )}
        
        {/* 加载指示器 */}
        {isLoading && (
          <div className="loading-indicator"></div>
        )}
        
        {/* 触摸提示 */}
        {isMobile && !isSwiping && (
          <div className="touch-hint"></div>
        )}
        
        {/* 直播标识 */}
        <div className="live-badge">
          <span className="live-dot"></span>
          LIVE
        </div>
        
        {/* 热度标签 */}
        {hotLevel > 0 && (
          <div className="hot-badge">
            {getHotIcon()} {live.viewer}
          </div>
        )}
        
        {/* 推荐标签 */}
        {showTag && (
          <div className="recommend-tag">
            {getTagText()}
          </div>
        )}
        
        {/* 直播时长 */}
        <div className="live-duration">
          {duration}
        </div>
        
        {/* 进入直播间提示 */}
        <div className="enter-live-hint">
          点击进入直播间
        </div>
      </div>
      
      {/* 信息部分 */}
      <div className="live-info">
        <h3 className="live-title">{live.title}</h3>
        <div className="live-meta">
          <div className="location-info">
            📍 {live.location}
          </div>
          <div className="viewer-info">
            👁️ {live.viewer}
          </div>
        </div>
      </div>
    </div>
  );
} 